<style scoped>
  .demo {

  }

  #myChart {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
  }
</style>
<template>
  <div class="demo">
    <h2 style="color: red">999</h2>
    <div id="myChart"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import chinaJson from '../../../node_modules/echarts/map/json/china.json'
  import mapData from './data.json'


  export default {
    components: {},
    data() {
      return {}
    },
    mounted: function () {
      this.getChart();
    },
    methods: {
      getChart: function () {
        let myChart = echarts.init(document.getElementById('myChart'));
        echarts.registerMap('china', chinaJson);
        myChart.setOption({
          backgroundColor: '#404a59',
          title: {
            text: '全国主要城市空气质量',
            subtext: '',
            sublink: '',//http://www.pm25.in
            x:'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + ' : ' + params.value[2];
            }
          },
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x:'right',
            data:['pm2.5'],
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            }
          },

        })
       },
    }
  }
</script>
